jQuery(document).ready(function(){
	
	// start - get image list...
	var urlloc = domain + "storage/manage/images/upload/list/:response/:" + id;
	var urlloc2 = domain + "storage/manage/images/upload/delete/:response/:" + id;
	imageBox();
	
	var url   = $j("#upload_ajax_form").attr("action");
	
    var options = { 
        target:        '#pmessage',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse,  // post-submit callback 
 
        // other available options: 
        url:       url,        // override for form's 'action' attribute 
        type:      "post",        // 'get' or 'post', override for form's 'method' attribute 
        dataType:  "json",        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 
 
        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    };
    
    function showRequest(formData, jqForm, options)
    {
		$j("#fakename").css({
			backgroundColor: "white",
			color: "#8a8a8a",
			border: "1px #ccc solid"
		});

		$j("#image").css({
			backgroundColor: "white",
			color: "#8a8a8a",
			border: "1px #ccc solid"
		});
		
		$j("#preloading").fadeIn("slow");
		$j("#pagebody").css({
			overflow: "hidden"
		});
		
	    // here we could return false to prevent the form from being submitted; 
	    // returning anything other than false will allow the form submit to continue 
	    return true;
    } 
    
    function showResponse(data, statusText)
    {
		$j("#preloading").fadeOut("slow");
		$j("#pagebody").css({
			overflow: "visible",
			overflowX: "hidden"
		});
		
		// Oke we got some error....
    	if ( data.status == 'false' )
    	{
			$j("#progress").addClass("progress-error");
			$j("#progress").fadeIn("slow");
			$j("#progress #pmessage").text(data.message);
			$j("#"+data.input).css({
				backgroundColor: "#b70a33",
				color: "#fff",
				border: "1px #d80e3d solid"
			});	
    	}
    	else if ( data.status == 'true' )
    	{
			$j("#progress").removeClass("progress-error");
			$j("#progress #pmessage").text(data.message);
			$j("#progress").fadeIn("slow");
			
			// now we need to update box at list
			imageBox();
    	}
    }
    
	$j("#upload_ajax_form").submit(function(){
		
        // inside event callbacks 'this' is the DOM element so we first 
        // wrap it in a jQuery object and then invoke ajaxSubmit 
        $j(this).ajaxSubmit(options); 
 
        // !!! Important !!! 
        // always return false to prevent standard browser submit and page navigation 
        return false; 
	});

	
	$j("#upload_controll").bind("click", function(){
		$j("#upload_ajax_form").submit();
	});
	
	// This box is used to get live current image list for current image.
	// It will be used 1ce at script start and each time when upload successfully finish request
	function imageBox()
	{
		$j("#progress #pmessage").text("Attempting to retrive image list...");
		
		$j.ajax({
			type: "POST",
			url:  urlloc,
			error: function(){
				$j("#progress").fadeIn("fast");
				$j("#progress").addClass("progress-error");
				$j("#progress #pmessage").text("There is error with retriving image list data...");
			},
			success: function ( data, status ){
				document.getElementById("imageresponse").innerHTML = data;
				$j("#progress #pmessage").text("Data retrived...");
				$j("#progress").fadeOut("slow");
			}
		});
	}
	
	function deleteImage2( loc, id )
	{

	}
	
	$j("#discard").bind("click", function(){
		var conf = confirm ( "Do you really want to discard uploading new image?" );
		if ( conf )
		{
			$j("#progress #pmessage").text("Please wait...");
			$j("#progress").fadeIn("slow");
			setTimeout ( 'document.location="'+domain+'storage"', 3000 );	
		}
		else
		{
			$j("#progress #pmessage").text("Canceled...");
			$j("#progress").fadeIn("slow");
			setTimeout ( '$j("#progress").fadeOut("normal");', 3000 );	
		}
	});
	
});

function deleteImage( loc, id )
{
	jQuery(document).ready(function(){
		var urlloc = domain + "storage/manage/images/upload/list/:response/:" + id;
		var urlloc2 = domain + "storage/manage/images/upload/delete/:response/:" + id;
		
		$j("#progress").removeClass("progress-error");
		$j("#progress #pmessage").text("We are preparing deletion...");
		$j("#progress").fadeIn("slow");
		
		$j.ajax({
			type: "POST",
			url:  urlloc2,
			dataType:  "json", 
			error: function(){
				$j("#progress").fadeIn("fast");
				$j("#progress").addClass("progress-error");
				$j("#progress #pmessage").text("There is error with deleting image data...");
			},
			success: function ( data, status ){
				
				if ( data.status == "true" )
				{
					$j("#progress").fadeIn("fast");
					$j("#progress").removeClass("progress-error");
					$j("#progress #pmessage").text(data.message);
					
					
					imageBox2();
				}
				else if ( data.status == "false" )
				{
					$j("#progress").fadeIn("fast");
					$j("#progress").addClass("progress-error");
					$j("#progress #pmessage").text(data.message);
					
				}
			}
		});
		
		// This box is used to get live current image list for current image.
		// It will be used 1ce at script start and each time when upload successfully finish request
		function imageBox2()
		{
			var urlloc = domain + "storage/manage/images/upload/list/:response/:" + id2;
			$j("#progress #pmessage").text("Attempting to retrive image list...");
			
			$j.ajax({
				type: "POST",
				url:  urlloc,
				error: function(){
					$j("#progress").fadeIn("fast");
					$j("#progress").addClass("progress-error");
					$j("#progress #pmessage").text("There is error with retriving image list data...");
				},
				success: function ( data, status ){
					document.getElementById("imageresponse").innerHTML = data;
					$j("#progress #pmessage").text("Data retrived...");
					$j("#progress").fadeOut("slow");
				}
			});
		}
	});
}